<template>
  <div class="step3">
    <div class="title">
      <el-icon>
        <InfoFilled />
      </el-icon>Please note: Your bookings will expire in <span>{{ time }}</span>. Please hurry to secure your
      booking.
    </div>
    <div class="title-name">Confirm Your Reservation</div>
    <div class="title-dec">No payment is due at the time of booking, please confirm your reservaton detais.</div>
    <div class="form-box">
      <div class="left">
        <!-- code -->
        <el-collapse>
          <el-collapse-item title="Have a promo or Gift Code?" name="1">
            <div class="fl-row">
           CODE: <el-input v-model="code" />

            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- 支付多少钱 -->
        <div class="name">Payment options</div>
        <div class="payMini">
          <el-radio value="1" size="large">Pay minimum deposit - ( $24.99 )</el-radio>
        </div>
        <!-- 支付方式 -->
        <div class="name">Payment method</div>
        <div class="form-list">
          <el-form :label-position="'top'" label-width="auto" :model="formLabelAlign" :rules="rules" ref="formRef">
            <div class="fl-row">
              <div>
                <div class="name">Card payment</div>
                <div class="name-dec">Enter your card information below to complete your booking securely.We accept all major debit and credit cards.</div>
              </div>
              <ul>
                <li>
                  <img src="https://d1ktc0bp273yrr.cloudfront.net/BookingSiteApp/Assets/images/visa.svg" alt="">
                </li>
                <li>
                  <img src="https://d1ktc0bp273yrr.cloudfront.net/BookingSiteApp/Assets/images/mastercard.svg" alt="">
                </li>
                <li>
                  <img src="https://d1ktc0bp273yrr.cloudfront.net/BookingSiteApp/Assets/images/amex.svg" alt="">
                </li>
              </ul>
            </div>
            <div class="form">
              <el-form-item label="CARD NUMBER" prop="cardnumber">
                <el-input v-model="formLabelAlign.cardnumber" />
              </el-form-item>
              <el-form-item label="ZIP CODE" prop="zipcode">
                <el-input v-model="formLabelAlign.zipcode" />
              </el-form-item>
            </div>
            <div class="form form-other">
              <el-form-item label="NAME ON CARD" prop="cardname">
                <el-input v-model="formLabelAlign.cardname" />
              </el-form-item>
              <el-form-item label="EXPIRY DATE" prop="date">
                <el-date-picker v-model="formLabelAlign.date" type="month" value-format="YYYY-MM" :prefix-icon="customPrefix" popper-class="test" format="YYYY,DD" />
              </el-form-item>
              <el-form-item label="CV CODE" prop="cvcode">
                <el-input v-model="formLabelAlign.cvcode" />
              </el-form-item>
            </div>
          </el-form>
          <div class="fl-row-but">
            <div class="but" @click="prevent">PREVENT</div>
            <div class="but" @click="next">COMPLETE BOOKING</div>
          </div>
        </div>
      </div>
      <div class="right">
        <order></order>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import order from "./order.vue"
import { ref, shallowRef, h } from "vue"
const emits = defineEmits(["prevent"])
const time = ref("6:09")
const code = ref("")
const formRef = ref()
const customPrefix = shallowRef({
  render() {
    return h("p", "")
  }
})
const formLabelAlign = ref({
  date: "",
  cardnumber: "",
  zipcode: "",
  cardname: "",
  cvcode: ""
})
const rules = ref({
  date: [{ required: true, message: "请选择", trigger: "blur" }],
  cardnumber: [{ required: true, message: "请输入卡号", trigger: "blur" }],
  zipcode: [{ required: true, message: "请输入", trigger: "blur" }],
  cardname: [{ required: true, message: "请输入", trigger: "blur" }],
  cvcode: [{ required: true, message: "请输入", trigger: "blur" }]
})
const prevent = () => {
  emits("prevent")
}
const next = () => {
  formRef.value.validate((val) => {
    if (val) {
      emits("next")
    }
  })
}
</script>

<style scoped lang="scss">
.step3 {
  color: #0e2e57;

  .title {
    position: relative;
    width: 100%;
    padding: 15px;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-icon {
      margin-right: 5px;
    }

    span {
      color: var(--theme-color);
      font-size: 22px;
      margin: 0 5px;
    }
  }

  .title-name {
    font-size: 18px;
    font-weight: 600;
    margin: 30px 0 15px 0;
    text-align: left;
  }
  .title-dec {
    font-size: 14px;
    text-align: left;
  }

  .form-box {
    margin: 30px 0;
    display: flex;

    .left {
      width: calc(70% - 15px);
      margin-bottom: 30px;
      :deep(.el-collapse-item__header) {
        background: transparent;
        border: 1px solid var(--theme-color);
        padding-left: 30px;
        font-weight: 600;
        color: #0e2e57;
        font-size: 16px;
      }
      :deep(.el-collapse-item__wrap){
        background: transparent;
        border: 1px solid var(--theme-color);
        border-top: 0;
      }

      .payMini {
        border: 1px solid var(--theme-color);
        padding-left: 30px;
        text-align: left;
        :deep(.el-radio__input.is-checked .el-radio__inner) {
          background-color: var(--theme-color);
        }
        :deep(.el-radio__input.is-checked + .el-radio__label) {
          font-weight: 600;
          color: #0e2e57;
          font-size: 16px;
        }
      }

      .name {
        font-size: 18px;
        font-weight: 600;
        text-align: left;
        margin: 30px 0 15px;
      }

      .form-list {
        border-radius: 3px;
        border: 1px solid var(--theme-color);
        padding: 0 15px 15px;

        .fl-row {
          display: flex;
          align-items: start;
          gap: 30px;
        }
        ul {
          display: inline-block;
          margin-top: 15px;
          padding: 0;
          list-style: none;
          li {
            display: inline-block;
            float: left;
            img {
              height: 28px;
            }
          }
        }

        .name {
          font-size: 16px;
          margin: 15px 0 5px 0;
        }
        .name-dec {
          font-size: 12px;
          text-align: left;
          margin-bottom: 30px;
        }

        .form {
          display: flex;
          flex-wrap: wrap;

          .el-form-item {
            width: calc((100% - 15px) / 2);

            &:nth-child(2n) {
              margin-left: 15px;
            }

            :deep(.el-input__wrapper) {
              background: transparent;
              box-shadow: 0 0 0 1px var(--theme-color) inset;
            }

            :deep(.el-form-item__label) {
              color: #0e2e57;
            }
          }

          .check-but {
            :deep(.el-checkbox__inner) {
              background: transparent;
              border: 1px solid var(--theme-color);
            }

            span {
              color: var(--theme-color);
            }
          }
        }
        .form-other {
          .el-form-item {
            width: calc((100% - 30px) / 3);
            margin-left: 15px;
            &:nth-child(1) {
              margin-left: 0px;
            }
          }
        }

        .but {
          color: #e2e8fc;
          background: var(--theme-color-btn);
          font-size: 14px;
          width: 30%;
          //margin-left: 45px;
          text-align: center;
          cursor: pointer;
          height: 42px;
          line-height: 42px;
          // margin: 0 0 0 auto;
          font-weight: 600;
        }
      }
    }

    .right {
      flex: 1;
      border: 1px solid var(--theme-color);
      border-radius: 3px;
      margin-left: 15px;
    }
  }
}
.fl-row-but {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}
</style>